<template>
  <!-- 表单内容 -->
  <div style="border: solid 20px rgb(245, 247, 249)">
    <div span="24">
      <Row>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              用户名称:
            </div>
            <Input v-model="value2" placeholder="用户名称" />
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              状态:
            </div>
            <Select>
              <Option value="beijing">停用</Option>
              <Option value="shanghai">正常</Option>
            </Select>
          </div>
        </Col>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              部门:
            </div>
            <Select>
              <Option value="beijing">总公司</Option>
              <Option value="shanghai">分公司</Option>
            </Select>
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              创建时间:
            </div>
            <DatePicker
              type="date"
              v-model="formItem.date"
              placeholder="日期"
            ></DatePicker></div
        ></Col>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              手机号码:
            </div>
            <Input v-model="value2" placeholder="手机号码" />
          </div>
          <div style="text-align: center; margin: 20px">
            <Button type="primary" style="margin-right: 10px" icon="ios-search"
              >查询</Button
            >
            <Button
              style="margin-left: 10px"
              icon="ivu-icon ivu-icon-md-refresh"
              >重置</Button
            >
          </div></Col
        >
      </Row>
    </div>
    <!-- 增删改查-->
    <div style="display: flex; justify-content: space-between">
      <div class="but1" style="margin: 20px">
        <Button
          style="color: aliceblue"
          icon="ivu-icon ivu-icon-md-add"
          type="primary"
          @click="modal = true"
          >新增</Button
        >
        <Button icon="ivu-icon ivu-icon-md-cloud-upload">导入</Button>
        <Button icon="ivu-icon ivu-icon-md-cloud-download">导出</Button>
      </div>
      <div class="but" style="margin: 20px">
        <Button icon="ivu-icon ivu-icon-md-refresh"></Button>
        <Button icon="ivu-icon ivu-icon-md-search"></Button>
        <Button icon="ivu-icon ivu-icon-md-list"></Button>
        <Button icon="ivu-icon ivu-icon-md-print"></Button>
        <Button icon="ivu-icon ivu-icon-md-options"></Button>
      </div>
    </div>
    <!-- 表格 -->
    <div style="margin: 10px">
      <Table border ref="selection" :columns="columns" :data="data">
        <template #name="{ row }">
          <strong>{{ row.name }}</strong>
        </template>
        <template #action="{ index }">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index)"
            >修改</Button
          >
          <Button type="error" size="small" @click="remove(index, false)"
            >删除</Button
          >
        </template></Table
      >
    </div>
    <!-- 分页 -->
    <div style="display: flex; justify-content: flex-end; margin: 20px">
      <Page page-size="pageSize" :modelValue="num" :total="total" />
    </div>
  </div>
  <!-- 弹出内容添加 -->
  <Modal
    v-model="modal"
    title="新增管理员"
    :loading="loading"
    @on-ok="asyncOK(true)"
    class="inp1"
  >
    用户名称:<Input
      v-model="username"
      placeholder="名称"
      style="width: 400px; margin: 10px"
    />
    用户密码:<Input
      v-model="password"
      placeholder="密码"
      type="password"
      style="width: 400px; margin: 10px"
    />
    手机号:<Input
      v-model="tel"
      placeholder="密码"
      type="text"
      style="width: 400px; margin: 10px; margin-left: 16px"
    />
    <Ipload @getUrl="zz"></Ipload>
  </Modal>
  <!-- 弹出修改内容 -->
  <Modal
    v-model="modals"
    title="新增管理员"
    :loading="loading"
    @on-ok="asyncOK2(true)"
    class="inp1"
  >
    修改名称:<Input
      v-model="username"
      placeholder="名称"
      style="width: 400px; margin: 10px"
    />
    修改密码:<Input
      v-model="password"
      placeholder="密码"
      type="password"
      style="width: 400px; margin: 10px"
    />
    修改手机号:<Input
      v-model="tel"
      placeholder="密码"
      type="text"
      style="width: 380px; margin: 10px; margin-left: 16px"
    />
    <Ipload @getUrl="zz"></Ipload>
  </Modal>
</template>
<script>
import Ipload from "../../components/Upload.vue";
// import list from "../../Api/admin.js"
export default {
  components: { Ipload },
  data() {
    return {
      pageSize:5,
      total:0,
      num:1,
      dataUrl: [],
      users: [],
      avatarUrl: "",
      _id: "",
      modals: false,
      modal: false,
      loading: true,
      roles: "",
      username: "",
      tel: "",
      imgs: "",
      password: "",
      formItem: {
        date: "",
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "用户编号",
          key: "id",
        },
        {
          title: "用户名称",
          key: "name",
        },
        {
          title: "手机号",
          key: "tel",
        },
        {
          title: "头像",
          key: "imgs",
          width: 140,
          render: (h, params) => {
            return h("img", {
              src: params.row.imgs,
              style: {
                width: "100px",
                height: "100px",
              },
            });
          },
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data: [],
    };
  },
  created() {
    this.zhang();
    this.$axios
      .get(" http://unicloud.codecore.cn/admin/qiniutoken")
      .then((res) => {
        console.log(res);
      });
  },
  methods: {
    ye(i){
      console.log();
    },
    zz(i) {
      this.avatarUrl = i
          console.log(i);
    },
    zhang() {
      var that = this;
      this.$axios
        .get("http://unicloud.codecore.cn/admin/adminlist?page=0&limit=10")
        .then((res) => {
          console.log(res);
          var i = 0;
          for (i = 0; i < res.data.data.length; i++) {
            that.data.push({
              id: res.data.data[i]._id,
              name: res.data.data[i].username,
              roles: res.data.data[i].roles,
              tel: res.data.data[i].tel,
              imgs: res.data.data[i].avatarUrl,
            });
          }
        });
      console.log("090");
    },
    asyncOK(nodesc) {
      var that = this;
      this.$axios
        .post("http://unicloud.codecore.cn/admin/adminadd", {
          username: that.username,
          password: that.password,
          tel: that.tel,
          avatarUrl: that.avatarUrl,
          menus: {},
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.errMsg == "添加成功") {
            that.data = [];
            this.zhang();
            this.$Notice.success({
              title: "添加成功",
              desc: nodesc ? "管理员用户添加成功" : "",
            });
            setTimeout(() => {
              this.modal = false;
            }, 1);
          }
        });
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    show(index) {
      this.modals = true;
      this._id = this.data[index].id;
      this.username = this.data[index].name;
      this.roles = this.data[index].name;
      this.password = this.data[index].roles;
      this.tel = this.data[index].tel;
      this.avatarUrl = this.data[index].avatarUrl;
    },
    asyncOK2() {
      var that = this;
      this.$axios
        .post("http://unicloud.codecore.cn/admin/adminupdate", {
          _id: that._id,
          username: that.username,
          password: that.password,
          tel: that.tel,
          avatarUrl: that.avatarUrl,
          roles: that.roles,
          menus: "",
        })
        .then((res) => {
          console.log(res);
          if (res !== 0) {
            that.data = [];
            this.zhang();
            this.$Notice.success({
              title: "修改成功",
              // desc: nodesc ? "管理员用户修改成功" : "",
            });
          }

          setTimeout(() => {
            this.modals = false;
          }, 1);
        });
    },
    remove(index, nodesc) {
      this.$axios
        .post("http://unicloud.codecore.cn/admin/admindelete", {
          _id: this.data[index].id,
        })
        .then((res) => {
          this.data.splice(index, 1);
          console.log(res);
          this.$Notice.success({
            title: "删除成功",
            desc: nodesc ? "管理员用户删除成功" : "",
          });
        });
    },
    post1() {
      this.$axios
        .post("http://unicloud.codecore.cn/admin/adminadd")
        .then((res) => {
          //   console.log(res);
        });
    },
  },
};
</script>